<html>
	<head>
		<title>Analytics with Flowplayer</title>
		<script type = "text/javascript" src = "javascript/jquery-1.4.4.min.js"></script>
		<script type = "text/javascript" src="flowplayer-3.2.6.min.js"></script>
	</head>
	<body>
		<!--<a href="algo.flv" style="display:block;width:425px;height:300px;" id="flowplayer"></a> -->
		<a href = "http://www.oresoft.com/lvc/content/video/CSE/DesignOfAlgorithm/58_Searching_for_a_pair_of_elements_whose_sum_is_x.flv" 
			style="display:block;width:425px;height:300px;" id="flowplayer"></a>
		<script type="text/javascript">
			$(document).ready(function() {
				var playing = false;
				var totalTimeWatched = 0;
				var lastTimeCalled = new Date();
				var States = {
						playingEnded : 0,
						playingStared : 1,
						playingPaused : 2,
						playingPeriodicEvent : -2,
						playingResumed : 3,
						playingStopped : 4
				}
				jQuery(window).unload(function() {
					sendTotalTimeWatchedToServer();
				});
				setInterval(function() {
					playerStateChanged(States.playingPeriodicEvent);
				}, 5000);
				function sendTotalTimeWatchedToServer() {
					jQuery.ajax({
						type: "POST",
						async: false,
						url: "saveTotalTimeWatched.action",
						data: "totalTimeWatched="+totalTimeWatched,
					});
				}
				function playerStateChanged(state) {
					if (state == States.playingStared) {
						playing = true;
					} else if (state == States.playingPaused) {
						playing = false;
					} else if (state == States.playingResumed) {
						playing = true;
					} else if (state == States.playingPeriodicEvent) {
						if (playing) {
							totalTimeWatched+= ((new Date() - lastTimeCalled)) / 1000.0;
						}
						lastTimeCalled = new Date();
					} else if (state == States.playingEnded) {
						playing = false;
						sendTotalTimeWatchedToServer();
						totalTimeWatched = 0;
					} else if (state == States.playingStopped) {
						playing = false;
					}
				}
				flowplayer('flowplayer', 'flowplayer-3.2.7.swf', {
					clip : {
						autoPlay : false, 
						autoBuffering : false,
						onStart : function(clip) {
							playerStateChanged(States.playingStared);
						},
						onPause : function(clip) {
							playerStateChanged(States.playingPaused);
						},
						onResume : function(clip) {
							playerStateChanged(States.playingResumed);
						},
						onStop : function (clip) {
							playerStateChanged(States.playingStopped);
						},
						onFinish : function(clip) {
							playerStateChanged(States.playingEnded);
						}
					}
				})
			});
		</script>
	</body>
</html>